import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import styles from './style.module.scss'
import OneClickRenewal from './one-click-renewal/Index'
import QuerySalaryStatus from './query-salary-status/Index'
import RenderItem from './RenderItem'
import IconQueryInsurancePeople from '@/assets/operation/tbrycx.png'
import IconManageAccount from '@/assets/operation/ygzx.png'
import IconWhiteList from '@/assets/operation/bmd.png'
import IconBlackList from '@/assets/operation/hmd.png'
import IconInsuranceCompanyTransfer from '@/assets/operation/bsqy.png'
import ResetSms from './reset-sms/Index'
import RevokeInsranceOrder from './revokeInsuranceOrder/Index'
import IconQuerySalaryStatus from '@/assets/operation/lxsbcx.png'
import { Col, Row } from 'ant-design-vue'
@Component
export class ShortcutTool extends Render {
    onToPage(type: string) {
        const routeMap = {
            投保人员查询: '/insurance/insurancePeopleQuery',
            白名单: '/insurance/whiteList',
            黑名单: '/insurance/blackList',
            保司迁移: '/insurance/insuranceCompanyTransfer',
            薪资状态查询: '/operation/query-salary-status',
            账号管理: '/tools/employee-cancellation'
        }
        this.$router.push(routeMap[type as keyof typeof routeMap])
    }
    render() {
        return (
            <div>
                <Row gutter={13}>
                    <Col sm={24} md={12}>
                        <div class={`${styles['set-bg-1']} p-20px`}>
                            <div class="text-lg mb-10px">保险快捷中心</div>
                            <Row gutter={20}>
                                <Col md={8} sm={24}>
                                    <OneClickRenewal />
                                </Col>
                                <Col md={8} sm={24}>
                                    <RenderItem
                                        name="投保人员查询"
                                        src={IconQueryInsurancePeople}
                                        onClick={() => this.onToPage('投保人员查询')}
                                    />
                                </Col>
                                <Col md={8} sm={24}>
                                    <RevokeInsranceOrder />
                                </Col>
                                <Col md={8} sm={24}>
                                    <RenderItem
                                        name="白名单"
                                        src={IconWhiteList}
                                        onClick={() => this.onToPage('白名单')}
                                    />
                                </Col>
                                <Col md={8} sm={24}>
                                    <RenderItem
                                        name="黑名单"
                                        src={IconBlackList}
                                        onClick={() => this.onToPage('黑名单')}
                                    />
                                </Col>
                                <Col md={8} sm={24}>
                                    <RenderItem
                                        name="保司迁移"
                                        src={IconInsuranceCompanyTransfer}
                                        onClick={() => this.onToPage('保司迁移')}
                                    />
                                </Col>
                            </Row>
                        </div>
                    </Col>
                    <Col sm={24} md={12}>
                        <div class={`${styles['set-bg-2']} p-20px`}>
                            <div class="text-lg mb-10px">发薪快捷中心</div>
                            <Row gutter={20}>
                                <Col md={8} sm={24}>
                                    {/* <QuerySalaryStatus /> */}
                                    <RenderItem
                                        name="薪资状态查询"
                                        src={IconQuerySalaryStatus}
                                        onClick={() => this.onToPage('薪资状态查询')}
                                    />
                                </Col>
                                <Col md={8} sm={24}>
                                    <RenderItem
                                        name="账号管理"
                                        src={IconManageAccount}
                                        onClick={() => this.onToPage('账号管理')}
                                    />
                                </Col>
                                <Col md={8} sm={24}>
                                    <ResetSms />
                                </Col>
                            </Row>
                        </div>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default toNative<{}, {}>(ShortcutTool)
